<template>
    <div v-if="imagePopup.visible" class="image-popup popup-container" catchtouchmove="move" @click="onClose">
        <div class="image-popup__inner text-center">
            <span class="image-popup__close icon" @click="onClose">&#xe618;</span>
            <div class="inner-box">
                <img class="image-popup__inner-img" mode="widthFix" :src="imagePopup.src" />
            </div>
            <div @click.stop="onClickSave" class="btn btn-mobile btn-block btn-white-primary">保存相册</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import store from '@/store';
import { api } from '@/lib/api';

@Component({
    name: 'ImagePopup',
})
export default class ImagePopup extends Vue {
    public get imagePopup() {
        return store.state.utils.imagePopup;
    }

    public onClose() {
        this.imagePopup.visible = false;
        this.$store.commit('utils/setImagePopup', this.imagePopup);
    }
    public async onClickSave() {
        this.onClose();
        if (!this.imagePopup.src) {
            return;
        }
        const downloadResult = await api.downloadFile({
            url: this.imagePopup.src,
        });
        const result = await api.saveImageToPhotosAlbum({
            filePath: downloadResult.tempFilePath,
        });
        if (result.errMsg === 'saveImageToPhotosAlbum:ok') {
            wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000,
            });
        }
    }
    public move() {
        //
    }
}
</script>

<style lang="less">

.image-popup {
    &__close {
        position: absolute;
        display: inline-block;
        right: -45px;
        top: -45px;
        padding: 15px;
        font-size: 25px;
        color: #ffffff;
    }
    &__inner {
        position: absolute;
        width: 70%;
        left: 15%;
        top: 50%;
        transform: translateY(-50%);
        .inner-box {
            width: 100%;
            // background: @white-color;
            box-sizing: border-box;
        }
        &-img {
            width: 100%;
            vertical-align: middle;
        }
        .btn {
            position: relative;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 50px;
            line-height: 48px;
            border-radius: 50px;
        }
    }
}
</style>
